<!--
v-model:value    =====>   双向数据绑定
theme          ====>   主题，支持classic，monolith，nano

Event
change         ====>   选择颜色后，点save的回调事件
-->
<script setup>
import { onMounted, ref } from 'vue'
import '@simonwep/pickr/dist/themes/classic.min.css';   // 'classic' theme
// import '@simonwep/pickr/dist/themes/monolith.min.css';  // 'monolith' theme
// import '@simonwep/pickr/dist/themes/nano.min.css';      // 'nano' theme

// Modern or es5 bundle (pay attention to the note below!)
// import Pickr from '@simonwep/pickr';
import Pickr from '@simonwep/pickr/dist/pickr.es5.min';

const emit = defineEmits(['update:value', 'change'])
const props = defineProps({
  value: {
    type: String,
    default: '#42445a'
  },
  theme: {
    type: String,
    default: 'classic'
  }
})

const themes = {
  'classic':  {
    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)',
      'rgba(0, 188, 212, 0.7)',
      'rgba(0, 150, 136, 0.75)',
      'rgba(76, 175, 80, 0.8)',
      'rgba(139, 195, 74, 0.85)',
      'rgba(205, 220, 57, 0.9)',
      'rgba(255, 235, 59, 0.95)',
      'rgba(255, 193, 7, 1)'
    ],

    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: true,
        rgba: true,
        hsva: true,
        input: true,
        clear: true,
        save: true
      }
    }
  },
  'monolith': {
    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)'
    ],

    defaultRepresentation: 'HEXA',
    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: false,
        rgba: false,
        hsva: false,
        input: true,
        clear: true,
        save: true
      }
    }
  },
  'nano': {
    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)'
    ],

    defaultRepresentation: 'HEXA',
    components: {
      preview: true,
      opacity: true,
      hue: true,

      interaction: {
        hex: false,
        rgba: false,
        hsva: false,
        input: true,
        clear: true,
        save: true
      }
    }
  }
}

const pickrContainerRef = ref(null)
const themeContainerRef = ref(null)
let pickr = null;

onMounted(() => {
  init()
})

const init = () => {
  const theme = props.theme
  const config = themes.theme

  const button = document.createElement('button');
  button.innerHTML = theme;
  // console.log(button)

  const el = document.createElement('p');
    pickrContainerRef.value.appendChild(el);

    // Delete previous instance
    if (pickr) {
      pickr.destroyAndRemove();
    }

    // Apply active class
    console.log(button.classList)
    button.classList['add']('active');
    console.log(button.classList)
    // for (const btn of buttons) {
    //
    // }

    // Create fresh instance
    pickr = new Pickr(Object.assign({
      el, theme,
      default: props.value
    }, config));

    // Set events
    pickr.on('init', instance => {
      console.log('Event: "init"', instance);
    }).on('hide', instance => {
      console.log('Event: "hide"', instance);
    }).on('show', (color, instance) => {
      console.log('Event: "show"', color, instance);
    }).on('save', (color, instance) => {
      console.log('Event: "save"', color, instance);
    }).on('clear', instance => {
      console.log('Event: "clear"', instance);
    }).on('change', (color, source, instance) => {
      console.log('Event: "change"', color, source, instance);
    }).on('changestop', (source, instance) => {
      console.log('Event: "changestop"', source, instance);
    }).on('cancel', instance => {
      console.log('cancel', pickr.getColor().toRGBA().toString(0));
    }).on('swatchselect', (color, instance) => {
      console.log('Event: "swatchselect"', color, instance);
    });
  // themeContainerRef.value.appendChild(button);
}

</script>

<template>
  <div class="theme-container" ref="themeContainerRef"></div>
  <div class="pickr-container" ref="pickrContainerRef"></div>
</template>

<style scoped lang="scss">

</style>
